<template>
    <div class="content">
        <span id="zhuce">没有账号?点击
                <router-link to='/regist'>注册</router-link> 
            </span>
          <img id="fyj" src="../assets/14.png" alt="">
            <h2 style="position: absolute;top: 40px;left: 700px;color: white;">注册账号</h2>
            <hr>
        <div class="yeye">
            <div class="box6">
                <p style="padding-top: 80px;">
           <label for="">用户名：</label>
           <input type="text" v-model="username" placeholder="输入用户名" @blur="modifyusername()">
           <span style="color: red;font-size: 12px;">{{errors.username}}</span>
        </p>
        <p>
           <label for="">密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
           <input type="password" v-model="password" placeholder="请输入密码" @blur="modifypwd()">
           <span style="font-size: 12px;">{{errors.password}}</span>
        </p>
        <p>
          <button @click="login" class="btn">登录</button>
        </p>
            </div>
        </div>
        <div>
            <img class="ten"  src="../assets/15.png" alt="">
        </div>
    </div>
</template>

<script>
export default{
    //199000933 黎雪娅
    name:'LoginView',
    data(){
        return{
            errors:{},
            username:'',
            password:''
        }
    },
    methods: {
        login(){
            let userInfo = {
            name:this.username,
            password:this.password,
            token:'usertoken'
            }
            if(this.errors.username==''&&this.errors.password==''){
                this.$store.dispatch('setUserInfo',userInfo).then(()=>{
                this.$router.push('/')
            })
            }
        },
         modifyusername() {
                    // let name = this.loginForm.username
                    // console.log(name);
                    console.log(this.username);
                    if (this.username == null || this.username == '') {
                        return this.errors.username ='用户名不能为空！'                      
                    } 
                    else {
                        return this.errors.username =""
                    }
                },
        modifypwd() {
                    if (this.password.length <= 5 || this.password.length >= 20 || this.password.length == '') {
                        return this.errors.password = '密码格式错误'
                    } else {
                        return this.errors.password =""
                    }
                },      
    },
}
</script>

<style lang="scss">
.content{
    position: relative;
    width: 100%x;
    height: 640px;
    border: 1px solid gainsboro;
    margin:20px auto;
    background: url(../assets/14.webp);
}
.pist {
    font-size: 12px;
    color: red;
}
.yeye{
    position: absolute;
    top: 200px;
    left: 500px;
}
.yeye input{
    width: 300px;
    height: 40px;
    border: 1px solid #ed66b2;
    // margin-bottom: 40px;
}
 .box6 {
    width: 580px;
    height:340px;
    position: relative;
    left:200px;
    top: -20px;
    background-color: rgba(255, 255, 255, 0.5);
        }
 .box6 p{
    margin-bottom: 40px;
 }
 .btn{
    width: 140px;
    height: 40px;
    margin: 10px;
    background: #bab7b8;
    color: white;
 }
 .btn:hover{
    background-color:  #FF7BAC;
    border-color:aliceblue;
    color: white;
 }
 .ten{
    position: absolute;
    top: 60px;
    width: 400px;
    left:240px;
        }
</style>